<template>
    <div id="welcome">
        <div class="content">
            <h3 style="margin-top: 5vh;">COVID-19</h3>
            <nut-icon color="#a57eff" font-class-name="iconfont" class-prefix="icon" name="anquan" size="120"/>
            
            <h1>校园健康码</h1>
            <nut-divider :style="{ padding: '0 5vh' }"/>
            <div style="margin-bottom: 5vh; letter-spacing: 3vh;">&nbsp河北农业大学</div>
            <div class="text">It aims to better manage the epidemic</div>
            <div class="text">situation for the campus and create a</div>
            <div class="text">better Campus</div>
            <div style="margin-top: 5vh">
                <nut-button type="default" @click="toLogin">进入系统</nut-button>
            </div>
        </div>
    </div>
</template>

<script>
import  {useRouter} from "vue-router";
export default {
    components: {},
    setup() {
        return {
        }
    },
    mounted() {
    },
    methods: {
        toLogin: function() {
            this.$router.push('logintab');
        }
    }
};
</script>

<style>
    body {
        background-color: rgb(165, 126, 255);
    }
    #welcome {
        width: 100%;
        height: 81vh;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 2vh;
        margin-bottom: 2vh;
        /* background-color: #fff; */
    }
    .content {
        width: 80%;
        /* height: 10vh; */
        padding: 3rem 2rem 3rem 2rem;
        background-color: #ffffff;
        /* overflow: scroll; */
        border-radius: 8px;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        box-shadow: 0px 1px 5px rgba(48, 48, 48, 0.5);
    }
    .text {
        margin: 1vh;
    }

</style>